<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车.dangdang</title>
    <link rel="stylesheet" href="../css/cart.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
     <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
	   <link rel="stylesheet" href="../lib/font/iconfont.css">
</head>
<body>
   <!-- 头部 -->
    <div id="header">
    <!-- 头部版心 -->
    <div class="header-con">
    <!-- 头部版心左 -->
    <div class="header-con-left">
      <li>
          <a href="">
            <span>送至：北京</span>
          </a>
        </li>
    </div>
    <!-- 头部版心右 -->
    <div class="header-con-right">
            <li>
          <a href="cart.html" target="_blank">
            <span style="color:red;">购物车</span>
          </a>
        </li>
        <li>
          <a href="">
            <span>我的订单</span>
          </a>
        </li>
        <li>|</li>
        <li>
          <a href="">
            <span>我的云书房</span>
          </a>
        </li>
        <li>|</li>
        <li>
          <a href="">
            <span>我的当当</span>
          </a>
        </li>
        <li>|</li>
         <li>
          <a href="">
            <span>0元领物</span>
          </a>
        </li>
        <li>|</li>
         <li>
          <a href="">
            <span>小说投稿</span>
          </a>
        </li>
        <li>|</li>
         <li>
          <a href="">
            <span>我要出书</span>
          </a>
        </li>
        <li>|</li>
         <li>
          <a href="">
            <span>企业采购</span>
          </a>
        </li>
        <li>|</li>
         <li>
          <a href="">
            <span>客户服务</span>
          </a>
        </li>
      </ul>
    </div>
    </div>
    </div>
      <!--导航 -->
    <div id="nav">
    <!--导航版心  -->
   <div class="nav-con">
    <img src="../images/cart1.png" style="margin-top:10px;">
	<br>
	<div class="cart-nav">
   <img src="../images/dd_logo.jpg" style="margin-top:10px;">
   <ul>
   <li style="background:red;color:#ffffff;">我的购物车</li>
   <li>填写订单</li>
   <li>完成订单</li>
    </ul>
   </div>
   </div>
   </div>
   <div class="cart-center"></div>
     <script>
    const cartList = JSON.parse(localStorage.getItem('cartList'))
    if (!cartList) {
      alert('您的购物车为空, 快去选购把')
    } else {
      bindHtml()
      bindEvent()
    }
    function bindHtml() {
      let selectAll = cartList.every(item => {
        return item.isSelect === true
      })
      let str = `
        <div class="top">
          <input class="selectAll" type="checkbox" ${ selectAll ? 'checked' : '' }>   全选
        </div>
        <ul class="center">
      `
	  cartList.forEach(item => {
        str += `
          <li>
            <div class="select">
              <input data-id=${ item.id } class="selectOne" type="checkbox" ${ item.isSelect ? 'checked' : '' }>
            </div>
            <div class="info">
              <img src="${ item.verticalPic }" alt="">
              <p>${ item.actors }</p>
            </div>
            <p class="price">${ item.price }</p>
            <div class="number">
              <button class="sub" data-id=${ item.id }>-</button>
              <input type="text" value="${ item.number }">
              <button class="add" data-id=${ item.id }>+</button>
            </div>
            <p class="xiaoji">￥： ${ item.xiaoji.toFixed(2) }</p>
            <div class="del" data-id=${ item.id }>删除</div>
          </li>
        `
      })
      let selectArr = cartList.filter(item => item.isSelect)
      let selectNumber = 0
      // 选中商品总价
      let selectPrice = 0
      selectArr.forEach(item => {
        selectNumber += item.number
        selectPrice += item.xiaoji
      })
      str += `
        </ul>
        <div class="bottom">
          <p>选中商品数量  <span>${ selectNumber }</span></p>
          <p>总价： <span>￥： ${ selectPrice.toFixed(2) }</span></p>
          <button class="pay" ${ selectArr.length ? '' : 'disabled'}>去支付</button>
          <button class="clear">清空购物车</button>
        </div>
      `

      // 整体添加到页面的盒子里面
      $('.cart').html(str)
    }

    function bindEvent() {
      // 4-1. 全选按钮的事件
      $('.cart').on('change', '.selectAll', function () {
        // 自己的状态就是每一条数据的状态
        // 先获取自己的状态
        // console.log(this.checked)
        // 让数组里面的每一个数据的 isSelect 都变成 自己的状态
        cartList.forEach(item => {
          item.isSelect = this.checked
        })

        // 从新使用这个数据去渲染一遍页面就可以了
        //   因为从新渲染页面了, 页面上的元素就变了, 是一套新的元素了
        //   就没有事件了, 因为页面回改变元素, 我们最好使用事件委托
        bindHtml()

        // 在从新存储一遍 localStorage
        localStorage.setItem('cartList', JSON.stringify(cartList))
      })

      // 4-2. 单选按钮的事件
      $('.cart').on('change', '.selectOne', function () {
        // console.log($(this).data('id'))
        // 你要知道你点击的是哪一个数据的单选按钮
        const id = $(this).data('id')

        // 找到数组中 id 一样的那一条数据改变一下 isSelect 属性
        cartList.forEach(item => {
          if (item.id === id) {
            item.isSelect = !item.isSelect
          }
        })

        // 从新渲染页面
        bindHtml()

        // 从新存储到 lcoalStorage 里面
        localStorage.setItem('cartList', JSON.stringify(cartList))
      })

      // 4-3. 减少商品数量的事件
      $('.cart').on('click', '.sub', function () {
        // console.log(this)
        // 找到你点击的是哪一个数据的 减少 按钮
        const id = $(this).data('id')

        // 循环数组, 把 id 对应的这个数据的 number 和 小计修改了
        cartList.forEach(item => {
          if (item.id === id) {
            // 当 item.number === 1 的时候, 不需要 --
            item.number > 1 ? item.number-- : ''
            item.xiaoji = item.price * item.number
          }
        })

        // 从新渲染一遍页面
        bindHtml()

        // 在从新存储一遍 localStorage
        localStorage.setItem('cartList', JSON.stringify(cartList))
      })

      // 4-4. 添加商品按钮的事件
      $('.cart').on('click', '.add', function () {
        // 拿到自己身上存储的 id
        const id = $(this).data('id')

        // 循环数组找到一个id 对应的数据
        cartList.forEach(item => {
          if (item.id === id) {
            item.number++
            item.xiaoji = item.number * item.price
          }
        })

        // 从新渲染页面
        bindHtml()

        // 在从新存储一遍 localStorage
        localStorage.setItem('cartList', JSON.stringify(cartList))
      })

      // 4-5. 点击删除的事件
      $('.cart').on('click', '.del', function () {
        // 拿到自己身上的 id
        const id = $(this).data('id')

        console.log('把数组中 id 为 : ' + id + ' 的数去去掉, 从新渲染页面, 从新存储到 lcoalStorage')
      })

      // 4-6. 点击清除的事件
      $('.cart').on('click', '.clear', function () {
        console.log('把数组清空')
        console.log('从新渲染页面')
        console.log('把空数组从新存储到 lcoalStorage 里面')
      })
    }

	
  </script>
 
</body>
</html>